﻿import React, { useState } from "react";
import "./SupplierTable.css";

function SupplierTable() {
  const [suppliers, setSuppliers] = useState([
    {
      companyName: "Teknion Roy & Breton Inc. - Head Office",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName:
        "Teknion Roy & Breton Inc. - Logistic and Client Service Centre",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Teknion Roy & Breton Inc. - RB Tek",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Teknion Roy & Breton Inc. - Roy & Breton",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Teknion Roy & Breton Inc. - Teknion Concept",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Teknion Roy & Breton Inc. - Teknion LS",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Teknion Roy & Breton Inc. - Teknion Québec",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Teknion Roy & Breton Inc. - Client Service Centre",
      iso14001: true,
      bcorp: false,
      leed: false,
    },
    {
      companyName: "Scott Construction Group",
      iso14001: false,
      bcorp: true,
      leed: true,
    },
    {
      companyName: "Trico Homes",
      iso14001: false,
      bcorp: true,
      leed: false,
    },
    {
      companyName: "Rise",
      iso14001: false,
      bcorp: true,
      leed: true,
    },
    {
      companyName: "Chandos Construction",
      iso14001: false,
      bcorp: true,
      leed: true,
    },
    {
      companyName: "Sky Fire Energy",
      iso14001: false,
      bcorp: true,
      leed: false,
    },
  ]);

  const [searchTerm, setSearchTerm] = useState("");
  const [filters, setFilters] = useState({
    iso14001: false,
    bcorp: false,
    leed: false,
  });
  const [sortAscending, setSortAscending] = useState(true);

  const handleSearchChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const handleFilterChange = (event) => {
    setFilters({
      ...filters,
      [event.target.name]: event.target.checked,
    });
  };

  const handleSort = () => {
    setSortAscending(!sortAscending);
    setSuppliers(
      [...suppliers].sort((a, b) => {
        const nameA = a.companyName.toLowerCase();
        const nameB = b.companyName.toLowerCase();
        if (sortAscending) {
          return nameA.localeCompare(nameB);
        } else {
          return nameB.localeCompare(nameA);
        }
      })
    );
  };

  const filteredSuppliers = suppliers.filter((supplier) => {
    if (filters.iso14001 && !supplier.iso14001) {
      return false;
    }
    if (filters.bcorp && !supplier.bcorp) {
      return false;
    }
    if (filters.leed && !supplier.leed) {
      return false;
    }
    return supplier.companyName
      .toLowerCase()
      .includes(searchTerm.toLowerCase());
  });

  return (
    <div className="supplierTableContainer">
      <div className="mt20 w100 top">
        <div className="mt20">
          <input
            type="text"
            placeholder="Search by company name"
            value={searchTerm}
            onChange={handleSearchChange}
          />
        </div>

        <div className="mt20">
          <label>
            <input
              type="checkbox"
              name="iso14001"
              checked={filters.iso14001}
              onChange={handleFilterChange}
            />{" "}
            ISO 14001
          </label>
          <label>
            <input
              type="checkbox"
              name="bcorp"
              checked={filters.bcorp}
              onChange={handleFilterChange}
            />{" "}
            BCorp
          </label>
          <label>
            <input
              type="checkbox"
              name="leed"
              checked={filters.leed}
              onChange={handleFilterChange}
            />{" "}
            LEED
          </label>
        </div>
      </div>

      {/* Sort button is now removed */}

      <div className="mt20 w100">
        <table>
          <thead>
            <tr>
              <th onClick={handleSort}>
                Company Name
                {/* Add a span to show the arrow */}
                <span style={{ marginLeft: "5px" }}>
                  {sortAscending ? "▼" : "▲"}{" "}
                  {/* Changed the arrow direction */}
                </span>
              </th>
              <th>ISO 14001</th>
              <th>BCorp</th>
              <th>LEED</th>
            </tr>
          </thead>
          <tbody>
            {filteredSuppliers.map((supplier) => (
              <tr key={supplier.companyName}>
                <td>{supplier.companyName}</td>
                <td>{supplier.iso14001 ? "Yes" : "No"}</td>
                <td>{supplier.bcorp ? "Yes" : "No"}</td>
                <td>{supplier.leed ? "Yes" : "No"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default SupplierTable;
